<!doctype html>
<html lang="en">
	<head>
		<meta charset= "utf-8"/>
		<title>Final Project - Space and Earth Exploration</title>
		<script src="scripts/SCORM_API_wrapper.js" language="javascript"></script>
		<script src="scripts/sessionstorage.1.4.js" language="javascript"></script>
		<script src="scripts/scripts.js" language="javascript"></script>
		<link href="styles/styles.css" rel="stylesheet" type="text/css"/>

	</head>
	
	<body onLoad="javascript:visitMoonpage4()">
	
				<div id="logo">
			<div><img  src="images/mastermindlogo1.png" width="230px" alt="The logo" title="The logo"/></div>
				</div><br>
		
				<header><img src="images/lunar-eclipse-header.png"alt="Moon Lunsr Eclipse Header" title="Moon Lunsr Eclipse Header"/></header><br/><br/>
				
			<section>
	    		  <div id="container">
		
						  <div id="leftBar">
						  	<nav>
						    	<div class="barbuttons"><a href= "home-page.html">Home</a></div><br/>
			    				<div class="barbuttons"><a href= "moon-page1.html">Moon</a></div><br/>
			    				<div class="barbuttons"><a href= "sun-page1.html">Sun</a></div><br/>
								<div class="barbuttons"><a href="earth-page1.html" >Earth</a></div><br/>
								<br/>
							 	<div id="test-Link" ><a href="final-test.html"><strong>TEST</strong></a></div>
							 	</nav><br/>
							 	
						 	 	   	<p id="leftBarText"><strong>Did You Know?</strong><br/>
						    			A lunar eclipse is visible from the moon.
										If you were on the moon, most of the earth would disappear. 
										The only thing you would see is a ring around the earth.
								</p>
						
						  </div>
						  
						  <div id="content">
						  <h1>Lunar Eclipse</h1><br/>
							  <div id="pics">
							  <img src="images/lunar-eclipse.jpg"  width="460px" height="250px" alt="Moon Lunar Eclipse Image1" title="Moon Lunar Eclipse Image1"/>
							  </div>
						    <p>The Earth travels around the sun and the moon travels around the earth. 
						    A lunar eclipse happens when all three align. 
						    The Earth blocks the sunlight from reaching the moon thus,						    
						     the earth creates two shadows. The first one is a dark shadow called “umbra.”  
						     The second shadow is called “penumbra.” We do not notice when the moon is in the penumbra because 						     
						     it is not dark enough to notice from Earth. 
						     When the moon is in part of the umbra, it is a partial lunar eclipse. 
						     When the moon is all the way in the umbra shadow, it is called a total lunar eclipse. 
						     The total eclipse will last about forty minutes.
						    </p>
						    
						  </div>
						  
						 <div id="rightBar2">
						
				  	    <aside id="aside-info">
							<header>
								<p id="aside-title-audio">Audio</p>
							</header>
								<audio id="narration2" controls="controls">
									<source src="audio/lunareclipse.mp3" type="audio/mp3">
									<source src="audio/lunareclipse.ogg" type="audio/ogg">
								</audio><br/>
								
							<header>
								<p id="aside-title-audio">Transcript</p>
							</header>
							<div id="transcript">
								<p>A lunar eclipse occurs when the moon passes through the earth’s shadow.  
								This only happens when the earth, moon and sun are aligned. The earth blocks sunlight from reaching the moon. 
								The dark shadow from the earth is called “umbra.” 
								When the moon is partially in the earth’s umbra, it causes a partial eclipse. 
								When the moon is all the way in the earth’s umbra, it is called a total eclipse.
								</p>
								
							</div>
								<img src="images/lunareclipse2.png" width="180px" alt="Moon Lunar Eclipse Image2" title="Moon Lunar Eclipse Image2"/>
							
							</aside>   
						 

						</div> 
						  	    
							<div id="footer"><br/>
								    <a class="movingButtons" href="moon-page3.html">Back</a>
								    <a class="movingButtons" href="activity-moon.html"><strong>ACTIVITY</strong></a>	    
							</div>
					
					</div>
						
		</section>
			
	</body>

</html>